<script lang="ts" setup>
import type { User } from '~/utils/api/user-api';

interface Props {
	author: User;
}

defineProps<Props>();
</script>

<template>
	<div class="flex gap-2 items-center">
		<Avatar size="xs">
			<AvatarImage
				v-if="author.headPic"
				:alt="author.username"
				:src="author.headPic"
			/>
			<AvatarFallback>
				{{ author.nickName }}
			</AvatarFallback>
		</Avatar>
		<span class="text-slate-800">{{ author.nickName }}</span>
	</div>
</template>

<style scoped>

</style>
